<template>
  <div style="width: 100%">
    <el-container>
      <el-aside width="300px">
        <div class="record-list-box-box">
          <el-date-picker
            size="small"
            v-model="chooseDate"
            type="date"
            value-format="YYYY-MM-DD"
            placeholder="日期"
            @change="dateChange()"
          ></el-date-picker>
          <div class="record-list-box" v-loading="recordsLoading" :style="recordListStyle">
            <ul v-if="detailFiles.length > 0" class="infinite-list record-list">
              <li v-for="item in detailFiles" class="infinite-list-item record-list-item">
                <el-tag v-if="chooseFile != item" @click="checkedFile(item)">
                  <el-icon>
                    <VideoCamera />
                  </el-icon>
                  {{ moment(item.startTime).format("HH:mm:ss") }}-{{
                    moment(item.endTime).format("HH:mm:ss")
                  }}
                </el-tag>
                <el-tag v-if="chooseFile == item" type="danger">
                  <el-icon>
                    <VideoCamera />
                  </el-icon>
                  {{ moment(item.startTime).format("HH:mm:ss") }}-{{
                    moment(item.endTime).format("HH:mm:ss")
                  }}
                </el-tag>
                <el-button icon="Download" link style="color: #409eff; margin-left: 5px"
                           @click="downloadRecord(item)"></el-button>
              </li>
            </ul>
          </div>
          <div size="small" v-if="detailFiles.length == 0" class="record-list-no-val">暂无数据</div>
        </div>
      </el-aside>
      <el-main style="padding-bottom: 10px">
        <div class="playBox" :style="playerStyle">
          <player
            ref="recordVideoPlayer"
            :videoUrl="videoUrl"
            :error="videoError"
            :message="videoError"
            :hasAudio="hasAudio"
            style="max-height: 100%"
            fluent
            autoplay
            live
          ></player>
        </div>
        <div class="player-option-box">
          <div class="player-option-box-btn">
            <el-button-group>
              <el-time-picker
                size="small"
                is-range
                align="left"
                v-model="timeRange"
                value-format="yyyy-MM-dd HH:mm:ss"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                @change="timePickerChange"
                placeholder="选择时间范围"
              >
              </el-time-picker>
            </el-button-group>

            <el-button-group>
              <el-button size="small" class="iconfont icon-zanting" title="开始" @click="gbPause()"></el-button>
              <el-button size="small" class="iconfont icon-kaishi" title="暂停" @click="gbPlay()"></el-button>
              <el-dropdown size="small" title="播放倍速" @command="gbScale">
                <el-button size="small"> 倍速 <i class="el-icon-arrow-down el-icon--right"></i></el-button>
                <template v-slot:dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item command="0.25">0.25倍速</el-dropdown-item>
                    <el-dropdown-item command="0.5">0.5倍速</el-dropdown-item>
                    <el-dropdown-item command="1.0">1倍速</el-dropdown-item>
                    <el-dropdown-item command="2.0">2倍速</el-dropdown-item>
                    <el-dropdown-item command="4.0">4倍速</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
              <el-button size="small" class="iconfont icon-xiazai1" title="下载选定录像"
                         @click="downloadRecord()"></el-button>
              <el-button
                v-if="sliderMIn === 0 && sliderMax === 86400"
                size="small"
                class="iconfont icon-slider"
                title="放大滑块"
                @click="setSliderFit()"
              ></el-button>
              <el-button
                v-if="sliderMIn !== 0 || sliderMax !== 86400"
                size="small"
                class="iconfont icon-slider-right"
                title="恢复滑块"
                @click="setSliderFit()"
              ></el-button>
            </el-button-group>
          </div>
          <el-slider
            class="playtime-slider"
            v-model="playTime"
            id="playtimeSlider"
            :disabled="detailFiles.length === 0"
            :min="sliderMIn"
            :max="sliderMax"
            :range="true"
            :format-tooltip="playTimeFormat"
            @change="playTimeChange"
            :marks="playTimeSliderMarks"
          >
          </el-slider>
          <div class="slider-val-box">
            <div
              class="slider-val"
              v-for="item of detailFiles"
              :style="
                'width:' +
                getDataWidth(item) +
                '%; left:' +
                getDataLeft(item) +
                '%'
              "
            ></div>
          </div>
        </div>
      </el-main>
    </el-container>
    <recordDownload ref="recordDownload"></recordDownload>
  </div>
</template>

<script>
import player from "../common/jessibuca.vue";
import moment from "moment";
import recordDownload from "../dialog/recordDownload.vue";
import {
  getRecordList,
  pausePlayback,
  resumePlayback,
  speedPlayback,
  startDownload,
  startPlayback,
  stopDownload,
  stopPlayback
} from "@/api/video_monitor/record";

export default {
  name: "app",
  components: {
    player,
    recordDownload
  },
  data() {
    return {
      deviceId: this.$route.params.deviceId,
      channelId: this.$route.params.channelId,
      recordsLoading: false,
      streamId: "",
      hasAudio: false,
      detailFiles: [],
      chooseDate: null,
      videoUrl: null,
      chooseFile: null,
      streamInfo: null,
      app: null,
      mediaServerId: null,
      ssrc: null,

      sliderMIn: 0,
      sliderMax: 86400,
      autoPlay: true,
      taskUpdate: null,
      tabVal: "running",
      recordListStyle: {
        height: this.winHeight + "px",
        overflow: "auto",
        margin: "10px auto 10px auto"
      },
      playerStyle: {
        margin: "0 auto 20px auto",
        height: this.winHeight + "px"
      },
      winHeight: window.innerHeight - 240,
      playTime: null,
      timeRange: null,
      startTime: null,
      endTime: null,
      playTimeSliderMarks: {
        0: "00:00",
        3600: "01:00",
        7200: "02:00",
        10800: "03:00",
        14400: "04:00",
        18000: "05:00",
        21600: "06:00",
        25200: "07:00",
        28800: "08:00",
        32400: "09:00",
        36000: "10:00",
        39600: "11:00",
        43200: "12:00",
        46800: "13:00",
        50400: "14:00",
        54000: "15:00",
        57600: "16:00",
        61200: "17:00",
        64800: "18:00",
        68400: "19:00",
        72000: "20:00",
        75600: "21:00",
        79200: "22:00",
        82800: "23:00",
        86400: "24:00"
      }
    };
  },
  computed: {},
  mounted() {
    this.recordListStyle.height = this.winHeight + "px";
    this.playerStyle["height"] = this.winHeight + "px";
    this.chooseDate = moment().format("YYYY-MM-DD");
    this.dateChange();
    window.addEventListener("beforeunload", this.stopPlayRecord);
  },
  unmounted() {
    player.unmounted();
    window.removeEventListener("beforeunload", this.stopPlayRecord);
  },
  methods: {
    async dateChange() {
      if (!this.chooseDate) {
        return;
      }
      this.setTime(this.chooseDate + " 00:00:00", this.chooseDate + " 23:59:59");
      this.recordsLoading = true;
      let res = await getRecordList(this.deviceId, this.channelId, this.startTime, this.endTime);
      this.recordsLoading = false;
      this.detailFiles = res.data.recordList ? res.data.recordList : [];
    },
    moment: function(v) {
      return moment(v);
    },
    setTime: function(startTime, endTime) {
      this.startTime = startTime;
      this.endTime = endTime;
      let start = (new Date(this.startTime).getTime() - new Date(this.chooseDate + " 00:00:00").getTime()) / 1000;
      let end = (new Date(this.endTime).getTime() - new Date(this.chooseDate + " 00:00:00").getTime()) / 1000;
      this.playTime = [start, end];
      this.timeRange = [startTime, endTime];
    },
    videoError: function(e) {
      console.log("播放器错误：" + JSON.stringify(e));
    },
    checkedFile(file) {
      this.chooseFile = file;
      this.setTime(file.startTime, file.endTime);
      // 开始回放
      this.playRecord();
    },
    playRecord: function() {
      if (this.streamId !== "") {
        this.stopPlayRecord(() => {
          this.streamId = "";
          this.playRecord();
        });
      } else {
        startPlayback(this.deviceId, this.channelId, this.startTime, this.endTime)
          .then((res) => {
            this.streamInfo = res.data;
            this.app = this.streamInfo.app;
            this.streamId = this.streamInfo.stream;
            this.mediaServerId = this.streamInfo.mediaServerId;
            this.ssrc = this.streamInfo.ssrc;
            this.videoUrl = this.getUrlByStreamInfo();
            this.hasAudio =
              this.streamInfo.tracks && this.streamInfo.tracks.length > 1;
          });
      }
    },
    gbPlay() {
      console.log("前端控制：播放");
      resumePlayback(this.streamId)
        .then((res) => {
          this.$refs["recordVideoPlayer"].play(this.videoUrl);
        });
    },
    gbPause() {
      console.log("前端控制：暂停");
      pausePlayback(this.streamId).then(function(res) {
      });
    },
    gbScale(command) {
      console.log("前端控制：倍速 " + command);
      speedPlayback(this.streamId, command).then(function(res) {
      });
    },
    downloadRecord: function(row) {
      if (!row) {
        let startTimeStr = moment(
          new Date(this.chooseDate + " 00:00:00").getTime() +
          this.playTime[0] * 1000
        ).format("YYYY-MM-DD HH:mm:ss");
        let endTimeStr = moment(
          new Date(this.chooseDate + " 00:00:00").getTime() +
          this.playTime[1] * 1000
        ).format("YYYY-MM-DD HH:mm:ss");
        console.log(startTimeStr);
        console.log(endTimeStr);
        row = {
          startTime: startTimeStr,
          endTime: endTimeStr
        };
      }
      if (this.streamId !== "") {
        this.stopPlayRecord(() => {
          this.streamId = "";
          this.downloadRecord(row);
        });
      } else {
        startDownload(this.deviceId, this.channelId, row.startTime, row.endTime, 4)
          .then((res) => {
            let streamInfo = res.data;
            this.$refs.recordDownload.openDialog(
              this.deviceId,
              this.channelId,
              streamInfo.app,
              streamInfo.stream,
              streamInfo.mediaServerId
            );
          });
      }
    },
    stopDownloadRecord: function(callback) {
      this.$refs["recordVideoPlayer"].pause();
      this.videoUrl = "";
      stopDownload(this.deviceId, this.channelId, this.streamId)
        .then((res) => {
          if (callback) callback(res);
        });
    },
    stopPlayRecord: function(callback) {
      console.log("停止录像回放");
      if (this.streamId !== "") {
        this.$refs["recordVideoPlayer"].pause();
        this.videoUrl = "";
        stopPlayback(this.deviceId, this.channelId, this.streamId).then(function(res) {
          if (callback) callback();
        });
      }
    },
    getDataWidth(item) {
      let timeForFile = this.getTimeForFile(item);
      let result = timeForFile[2] / ((this.sliderMax - this.sliderMIn) * 1000);
      return result * 100;
    },
    getDataLeft(item) {
      let timeForFile = this.getTimeForFile(item);
      let differenceTime =
        timeForFile[0].getTime() -
        new Date(this.chooseDate + " 00:00:00").getTime();
      return (
        parseFloat(
          (differenceTime - this.sliderMIn * 1000) /
          ((this.sliderMax - this.sliderMIn) * 1000)
        ) * 100
      );
    },
    getUrlByStreamInfo() {
      if (location.protocol === "https:") {
        this.videoUrl = this.streamInfo["wss_flv"];
      } else {
        this.videoUrl = this.streamInfo["ws_flv"];
      }
      return this.videoUrl;
    },
    timePickerChange: function(val) {
      this.setTime(val[0], val[1]);
    },
    playTimeChange(val) {
      console.log(val);

      let startTimeStr = moment(
        new Date(this.chooseDate + " 00:00:00").getTime() + val[0] * 1000
      ).format("YYYY-MM-DD HH:mm:ss");
      let endTimeStr = moment(
        new Date(this.chooseDate + " 00:00:00").getTime() + val[1] * 1000
      ).format("YYYY-MM-DD HH:mm:ss");

      this.setTime(startTimeStr, endTimeStr);

      this.playRecord();
    },
    setSliderFit() {
      if (this.sliderMIn === 0 && this.sliderMax === 86400) {
        if (this.detailFiles.length > 0) {
          let timeForFile = this.getTimeForFile(this.detailFiles[0]);
          let lastTimeForFile = this.getTimeForFile(
            this.detailFiles[this.detailFiles.length - 1]
          );
          let timeNum =
            timeForFile[0].getTime() -
            new Date(this.chooseDate + " " + "00:00:00").getTime();
          let lastTimeNum =
            lastTimeForFile[1].getTime() -
            new Date(this.chooseDate + " " + "00:00:00").getTime();

          this.playTime = parseInt(timeNum / 1000);
          this.sliderMIn = parseInt(
            timeNum / 1000 - ((timeNum / 1000) % (60 * 60))
          );
          this.sliderMax =
            parseInt(lastTimeNum / 1000 - ((lastTimeNum / 1000) % (60 * 60))) +
            60 * 60;

          this.playTime = [this.sliderMIn, this.sliderMax];
        }
      } else {
        this.sliderMIn = 0;
        this.sliderMax = 86400;
      }
    },
    getTimeForFile(file) {
      let startTime = new Date(file.startTime);
      let endTime = new Date(file.endTime);
      return [startTime, endTime, endTime.getTime() - startTime.getTime()];
    },
    playTimeFormat(val) {
      let h = parseInt(val / 3600);
      let m = parseInt((val - h * 3600) / 60);
      let s = parseInt(val - h * 3600 - m * 60);

      let hStr = h;
      let mStr = m;
      let sStr = s;
      if (h < 10) {
        hStr = "0" + hStr;
      }
      if (m < 10) {
        mStr = "0" + mStr;
        s;
      }
      if (s < 10) {
        sStr = "0" + sStr;
      }
      return hStr + ":" + mStr + ":" + sStr;
    }
  }
};
</script>

<style>
.el-slider__runway {
  background-color: rgba(206, 206, 206, 0.47) !important;
}

.el-slider__bar {
  background-color: rgba(153, 153, 153, 0) !important;
}

.playtime-slider {
  position: relative;
  z-index: 100;
}

.data-picker-true {
}

.data-picker-true:after {
  content: '';
  position: absolute;
  width: 4px;
  height: 4px;
  background-color: #606060;
  border-radius: 4px;
  left: 45%;
  top: 74%;
}

.data-picker-false {
}

.slider-val-box {
  height: 6px;
  position: relative;
  top: -22px;
}

.slider-val {
  height: 6px;
  background-color: #007cff;
  position: absolute;
}

.record-list-box-box {
  width: 250px;
  float: left;
}

.record-list-box {
  overflow: auto;
  width: 220px;
  list-style: none;
  padding: 0;
  margin: 0;
  margin-top: 0px;
  padding: 1rem 0;
  background-color: #fff;
  margin-top: 10px;
}

.record-list {
  list-style: none;
  padding: 0;
  margin: 0;
  background-color: #fff;
}

.record-list-no-val {
  position: absolute;
  color: #9f9f9f;
  top: 50%;
  left: 110px;
}

.record-list-item {
  padding: 0;
  margin: 0;
  margin: 0.5rem 0;
  cursor: pointer;
}

.record-list-option {
  width: 10px;
  float: left;
  margin-top: 39px;
}

.player-option-box {
  padding: 0 20px;
}

.player-option-box-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
}
</style>
